<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS tutorials</title>
    <link href="style.css" rel="stylesheet">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<h1>Vue2</h1>

<div id="vue-app">
    <h1>1. 创建实例和数据绑定</h1>
    <p>{{ name }}</p>
    
    <!-- 数据绑定 -->
    <a v-bind:href="website">vue2 数据绑定</a>
    <input type="text" v-bind:value="name"><br>
    <p v-html="websiteTag"></p><br>
    
    <h1>2. 方法</h1>
    <!-- 函数 -->
    <p> {{ greet('vue') }}</p>
    
    <h1>3. 事件绑定</h1>
    <button v-on:click.once="addYear(1)">Add a year once</button>
    <button v-on:click="addYear(1)">Add a year</button>
    <button @click="subYear(1)">Subtract a year</button>
    <p>my age is {{age}}</p>
    <a v-on:click.prevent="click" v-bind:href="website">事件修饰符 click.prevent </a>
    <h2>3.2 按键事件</h2>
    <label>Name:</label>
    <input type="text" v-on:keyup.enter="logName"/>
    <label>Age:</label>
    <input type="text" v-on:keyup.alt.enter="logAge"/>
    
    <h1>4. 两种数据绑定方式</h1>
    <input v-model="name" type="text"/><br>
    <span>{{name}}</span>
    
    <h1>5. 计算属性</h1>
    <button v-on:click="a++">Add to A</button>
    <button v-on:click="b++">Add to B</button>
    <p>Age + {{a}}</p>
    <p>Age + {{b}}</p>
    <p>Age + A = {{addToA()}}</p>
    <p>Age+ B = {{addToB()}}</p>
    
    <h1>6. 动态CSS类  </h1>
    <h2>Example 1</h2>
    <div v-on:click="avaliable=!avaliable" v-bind:class="{avaliable:avaliable}">
        <span>Gavin</span>
    </div>
    
    <h1>7. v-if & v-show 条件</h1>
    <button v-on:click="error = !error">Toggle error</button>
    <button v-on:click="success = !success">Toggle success</button>
    <p v-if="error">v-if There are some errors</p>
    <p v-else-if="success">v-if  Whooo success</p>
    <p v-show="error">v-show 会占用dom 元素，占用一些dom 资源 There are some errors</p>
    <p v-show="success">v-show 会占用dom 元素，占用一些dom 资源  Whooo success</p>
    
    <h1>8. v-for循环 </h1>
    <ul>
        <li v-for="city in cities">{{city}}</li>
    </ul>
    <ul>
        <li v-for="(city,index) in cities">{{index}}-{{city}}</li>
    </ul>
    <ul>
        <li v-for="student in students">{{student.name}}-{{student.age}}</li>
    </ul>

    <h1>9. 组件介绍</h1>
    <greeting></greeting>
    <h1>10. 引用$refs</h1>
    <input type="text" ref="input">
    <button v-on:click="readRefs">Submit</button>
    <p>your fav food:{{output   }}</p>
    <h1>11. vue-cli</h1>
    <a href="https://github.com/vuejs/vue-cli" target="_blank">vue-cli github</a><br>
    <a href="https://cli.vuejs.org/zh/guide/" target="_blank">vue-cli 官网</a>
    
    <h1>12. Props参数传递</h1>
    <p> 父 组件传递数据至子组件</p>
    <h1>13. 创建实例和数据绑定</h1>
    <h1>14. 创建实例和数据绑定</h1>
    <h1>15. 创建实例和数据绑定</h1>
</div>
<script src="app.js"></script>
</body>
</html>